<div class="ngm-story-widget__content" [ngClass]="componentClasses$ | async"
  [ngStyle]="widgetStyle$ | async"
  [cdkContextMenuTriggerFor]="context_menu">
  <div class="ngm-story-widget__component-container">
    <ng-container #anchor></ng-container>
  </div>
  @if (placeholder$ | async) {
    <facebook-content-loader class="ngm-story-widget__placeholder dark:opacity-20"
      [animate]="false">
    </facebook-content-loader>
  }
</div>

<div class="ngm-story-widget__fab-menu flex flex-col justify-start items-center gap-2"
  cdkDragLockAxis="y"
  cdkDrag
  [cdkDragDisabled]="editable()"
  [cdkDragStartDelay]="100"
  (cdkDragMoved)="onDragFab($event)">
  
  <button *ngIf="showMenu$ | async" mat-mini-fab [cdkMenuTriggerFor]="context_menu">
    <mat-icon fontSet="material-icons-outlined" class="mr-1">menu</mat-icon>
  </button>

  <ng-container *ngIf="comments$ | async as comments">
    <button mat-icon-button color="basic" cdkOverlayOrigin #trigger="cdkOverlayOrigin" (click)="isCommentOpen=!isCommentOpen">
      <mat-icon fontSet="material-icons-outlined" class="mr-1">comment</mat-icon>
    </button>

    <ng-template
      cdkConnectedOverlay
      [cdkConnectedOverlayOrigin]="trigger"
      [cdkConnectedOverlayOpen]="isCommentOpen"
    >
      <ngm-story-comments class="ngm-story-widget__comments"
        [comments]="comments"
        (createComment)="onCreateComment($event)">
      </ngm-story-comments>

    </ng-template>
  </ng-container>
</div>

<ng-template #context_menu>
  <div cdkMenu class="cdk-menu__medium">
    <ng-container *ngFor="let menu of menus$ | async; trackBy: trackByMenu">
      <ng-container [ngSwitch]="menu.type">
        <button cdkMenuItem *ngSwitchCase="WIDGET_MENU_TYPE.Toggle" (click)="onClickMenu(menu)">
          <mat-icon *ngIf="menu.icon && !menu.selected">{{menu.icon}}</mat-icon>
          <mat-icon *ngIf="menu.selected">done</mat-icon>{{menu.name}}
        </button>
  
        <button cdkMenuItem *ngSwitchCase="WIDGET_MENU_TYPE.Action"
          [disabled]="!menu.editable"
          (click)="onClickMenu(menu)">
          <mat-icon fontSet="material-icons-outlined" class="mr-1">{{menu.icon}}</mat-icon>{{menu.name}}
        </button>
    
        <button cdkMenuItem *ngSwitchCase="WIDGET_MENU_TYPE.Menus"
          [cdkMenuTriggerFor]="subMenu"
          (cdkMenuOpened)="onSubMenuOpened(menu)"
          (cdkMenuClosed)="onSubMenuClosed(menu)"
          >
          <mat-icon fontSet="material-icons-outlined" class="mr-1">{{menu.icon}}</mat-icon>
          <span class="flex-1 text-left">{{menu.name}}</span>
          <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
        </button>
  
        <mat-divider *ngSwitchCase="WIDGET_MENU_TYPE.Divider"></mat-divider>
      </ng-container>
    </ng-container>

    <ng-container *ngIf="!standalone">
      <button cdkMenuItem (click)="focus()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">filter_center_focus</mat-icon>
        {{ 'Story.Widget.Focus' | translate: {Default: "Focus"} }}
      </button>

      <button cdkMenuItem *ngIf="!fullscreen" (click)="fullscreen=true">
        <mat-icon fontSet="material-icons-round" class="mr-1">fullscreen</mat-icon>
        {{ 'Story.Widget.Fullscreen' | translate: {Default: "Fullscreen"} }}
      </button>
      <button cdkMenuItem *ngIf="fullscreen" (click)="fullscreen=false">
        <mat-icon fontSet="material-icons-round" class="mr-1">fullscreen_exit</mat-icon>
        {{ 'Story.Widget.ExitFullscreen' | translate: {Default: "Exit Fullscreen"} }}
      </button>

      @if (isAuthenticated()) {
        <button cdkMenuItem (click)="pin()">
          <mat-icon fontSet="material-icons-round" class="mr-1">push_pin</mat-icon>
          {{ 'Story.Widget.PinHome' | translate: {Default: "Pin to Home"} }}
        </button>
      }
    </ng-container>
    
    <mat-divider></mat-divider>
    
    <button cdkMenuItem (click)="refresh(true)">
      <mat-icon fontSet="material-icons-round" class="mr-1">refresh</mat-icon>
      {{ 'Story.Widget.Refresh' | translate: {Default: "Refresh"} }}
    </button>
    @if (isAuthenticated()) {
      <button cdkMenuItem (click)="explore()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">explore</mat-icon>
        {{ 'Story.Widget.Explore' | translate: {Default: "Explore"} }}
      </button>
    }

    <ng-container *ngIf="navigate$ | async as item">
      <button cdkMenuItem *ngIf="item.show" (click)="navigate(item.dataSettings)">
        <mat-icon fontSet="material-icons-round" class="mr-1">navigate_next</mat-icon>
        {{ 'Story.Widget.Navigate' | translate: {Default: "Navigate"} }}
      </button>
    </ng-container>

    @if (isAuthenticated()) {
      <button cdkMenuItem (click)="explain()">
        <mat-icon fontSet="material-icons-round" class="mr-1">code</mat-icon>
        {{ 'Story.Widget.Explain' | translate: {Default: "Explain"} }}
      </button>
    }
    <button cdkMenuItem (click)="openShares()">
      <mat-icon fontSet="material-icons-outlined" class="mr-1">share</mat-icon>
      {{ 'Story.Widget.Share' | translate: {Default: "Share"} }}
    </button>

    <ng-container *ngIf="editable()">
      <mat-divider></mat-divider>
      <ng-container *ngIf="allowMultiLayer$ | async">
        <button cdkMenuItem (click)="bringForward()">
          <mat-icon fontSet="material-icons-outlined" class="mr-1">flip_to_front</mat-icon>
          {{ 'Story.Widget.BringForward' | translate: {Default: "Bring Forward"} }}
        </button>
        <button cdkMenuItem (click)="bringFront()">
          <mat-icon fontSet="material-icons-outlined" class="mr-1">vertical_align_top</mat-icon>
          {{ 'Story.Widget.BringtoFront' | translate: {Default: "Bring to Front"} }}
        </button>
        <button cdkMenuItem (click)="sendBackward()">
          <mat-icon fontSet="material-icons-outlined" class="mr-1">flip_to_back</mat-icon>
          {{ 'Story.Widget.SendBackward' | translate: {Default: "Send Backward"} }}
        </button>
        <button cdkMenuItem (click)="sendBack()">
          <mat-icon fontSet="material-icons-outlined" class="mr-1">vertical_align_bottom</mat-icon>
          {{ 'Story.Widget.SendtoBack' | translate: {Default: "Send to Back"} }}
        </button>
      </ng-container>

      <mat-divider></mat-divider>
      <button cdkMenuItem class="ngm-copilot-command-button" (click)="generateWithAI()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">auto_fix_high</mat-icon>
        {{ 'Copilot.GenerateWithAI' | translate: {Default: "Generate with AI"} }}
      </button>
      <button cdkMenuItem (click)="openEditAttributes()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">edit_attributes</mat-icon>
        {{ 'Story.Widget.EditAttributes' | translate: {Default: "Edit Attributes"} }}
      </button>
      <button cdkMenuItem (click)="openLinkedAnalysis()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">link</mat-icon>
        {{ 'Story.Widget.LinkedAnalysis' | translate: {Default: "Linked Analysis"} }}
      </button>
      <button cdkMenuItem [cdkMenuTriggerFor]="copyMenu">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">content_copy</mat-icon>
        <span class="flex-1 text-left">{{ 'Story.Story.Copy' | translate: {Default: "Copy"} }}</span>
        <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
      </button>
      <button cdkMenuItem [cdkMenuTriggerFor]="moveToMenu">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">drive_file_move</mat-icon>
        <span class="flex-1 text-left">{{ 'Story.Widget.MoveTo' | translate: {Default: "Move to"} }}</span>
        <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
      </button>
      <button cdkMenuItem (click)="download()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">file_download</mat-icon>
        {{ 'Story.Widget.Download' | translate: {Default: "Download"} }}
      </button>
      <button cdkMenuItem class="ngm-cdk-menu__danger" (click)="removeWidget()">
        <mat-icon fontSet="material-icons-outlined" class="mr-1">delete_forever</mat-icon>
        {{ 'Story.Story.Delete' | translate: {Default: "Delete"} }}
      </button>
    </ng-container>
  </div>
</ng-template>

<ng-template #copyMenu>
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem (click)="onCopy()">
      {{ 'Story.Story.Copy' | translate: {Default: "Copy"} }}
    </button>
    <button cdkMenuItem [cdkMenuTriggerFor]="copyToMenu">
      <span class="flex-1 text-left">
        {{ 'Story.Story.CopyTo' | translate: {Default: "Copy To"} }}
      </span>
      <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>
    </button>
    <button cdkMenuItem (click)="duplicate()">
      {{ 'Story.Story.Duplicate' | translate: {Default: "Duplicate"} }}
    </button>
  </div>
</ng-template>

<ng-template #moveToMenu>
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem (click)="onMoveToNew(STORY_POINT_TYPE.Responsive)">
      {{ 'Story.Story.NewResponsivePage' | translate: {Default: "New Responsive Page"} }}
    </button>
    <button cdkMenuItem (click)="onMoveToNew(STORY_POINT_TYPE.Canvas)">
      {{ 'Story.Story.NewCanvasPage' | translate: {Default: "New Canvas Page"} }}
    </button>
  
    <mat-divider></mat-divider>
    @for (point of pointList(); track point.key) {
      <button cdkMenuItem
        (click)="onMoveTo(point.key)">{{ point.name }}</button>
    }
  </div>
</ng-template>

<ng-template #copyToMenu>
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem (click)="onCopyToNew(STORY_POINT_TYPE.Responsive)">
      {{ 'Story.Story.NewResponsivePage' | translate: {Default: "New Responsive Page"} }}
    </button>
    <button cdkMenuItem (click)="onCopyToNew(STORY_POINT_TYPE.Canvas)">
      {{ 'Story.Story.NewCanvasPage' | translate: {Default: "New Canvas Page"} }}
    </button>
  
    <mat-divider></mat-divider>
    
    @for (point of pointList(); track point.key) {
      <button cdkMenuItem
        (click)="onCopyTo(point.key)">{{ point.name }}</button>
    }
  </div>
</ng-template>


<ng-template #subMenu>
  <div cdkMenu class="cdk-menu__medium">
    <ng-container *ngFor="let menu of customSubMenus; trackBy: trackByMenu">
      <mat-divider *ngIf="menu.type === WIDGET_MENU_TYPE.Divider"></mat-divider>
      <button cdkMenuItem *ngIf="menu.type !== WIDGET_MENU_TYPE.Divider"
        [ngClass]="menu.type"
        (click)="onClickMenu(menu)">
        <div *ngIf="menu.type === WIDGET_MENU_TYPE.Toggle" class="w-full flex-1 flex justify-between items-center">
          <mat-icon class="mr-2 shrink-0">{{ menu.selected ? 'done' : '' }}</mat-icon>
          <span>{{menu.name}}</span>
        </div>

        <div *ngIf="menu.type === WIDGET_MENU_TYPE.Action" class="w-full flex-1 flex justify-start items-center">
          <mat-icon *ngIf="menu.icon" class="mr-2 shrink-0">{{menu.icon}}</mat-icon>
          <ngm-display-behaviour class="max-w-full flex-1 text-left" [option]="{key: menu.name, caption: menu.label}" />
        </div>
      </button>
    </ng-container>
  </div>
</ng-template>
